import React, { Component } from 'react'
import ScrollBar from './index'
import './demo.scss'
import { Table, TableCol } from './../table/index'
import Button from './../button/button'

// 注意：如果li加了display:inline-block;那么ul要加font-size: 0px;去掉垂直间隙
export default class ScrollBarDemo extends Component {
  constructor (props) {
    super(props)

    this.listData = [{
      name: 'sdjslkdfjsdf',
      color: 'red'
    }, {
      name: 'fsdfsdffsf',
      color: 'blue'
    }, {
      name: 'afasfsdfsfdsdf',
      color: 'green'
    }, {
      name: 'sdfsdfsdf',
      color: 'yellow'
    }]
    
    this.tableData = [
      {
        name: 'a1',
        age: '1',
        height: '170',
        opera: '',
        id: 1
      },
      {
        name: 'a2',
        age: '2',
        height: '180',
        opera: '',
        id: 2
      }
    ]
  
  }
  render () {
    return (
      <div>
      
      <ScrollBar>
        <div className="tbaScrollBarUl">
          {
            this.listData.map((u, index) => {
              return(<div key={index} className="tbaScrollBarLi" style={{ background: u.color }}>
                <p>{u.name}</p>
              </div>)
            })
          }
        </div>
      </ScrollBar>

      <div style={{ marginTop: '100px' , width: '300px'}}>
      <ScrollBar>
        <div className="my-wrap">
        <Table tableData={this.tableData}>
        <TableCol
            keyName="name"
            label="名字"
            renderFn={(data) => { return (<b>{data.name}</b>) }}>
          </TableCol>
          <TableCol
            keyName="age"
            label="年龄">
          </TableCol>
          <TableCol
            keyName="height"
            label="身高"
            renderFn={(data) => { return ( <Button type="primary">{data.height}</Button> ) }}>
          </TableCol>
          <TableCol
            keyName="opera"
            label="操作"
            renderFn={(data) => { return (
              <span>
                <a href="http://www.baidu.com">查看</a>
                <a>删除</a>
            </span>) }}>
          </TableCol>
        </Table>
        </div>
      </ScrollBar> 
      </div>
      
      </div>
    )
  }
}